<template>
    <div class="my-header">
        <div class="left">
            <slot name="left">
                <RouterLink to="/city">城市</RouterLink>
            </slot>
        </div>
        <div class="center">
            <RouterLink to="/search">卡姿兰大眼睛</RouterLink>
        </div>
        <div class="right">
            <!-- TODO：根据用户是否登录，显示 登录 or 我的 -->
            <RouterLink v-show="isLogined" to="/center">我的</RouterLink>
            <RouterLink v-show="!isLogined" to="/login">登录</RouterLink>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { toRef } from 'vue';
import { useUseStore } from '@/stores/user';

const store = useUseStore();
const isLogined = toRef(store,"isLogined")
</script>

<style lang="scss" scoped>
.my-header {
    display: flex;
    height: 46px;
    align-items: center;
    background-color: #d30707;

    .left,
    .right {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        font-size: 16px;

        a {
            color: #fff;
        }
    }

    .center {
        flex: 1;
        height: 36px;
        line-height: 36px;
        background-color: #fff;
        border-radius: 20px;
        font-size: 16px;
        padding-left: 16px;

        a {
            color: #333;
        }
    }
}
</style>

